<script setup lang="ts">
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})

const iconName = computed(() => `#icon-${props.name}`)
</script>

<template>
  <svg
    class="svg_icon"
    aria-hidden="true"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>

<style scoped lang="less">
.svg_icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  // 因 icon 大小被设置为和字体大小一致，而 span 等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
  vertical-align: -0.15em;
  fill: currentcolor;
}
</style>
